<template>
	<view class="tabsdaren-content">
		<view class="tabsdaren">
			<view class="tabsdaren-1">
				<u-tabs @click="clickService" :current="currentTab" :list="tablist" lineWidth="30" lineColor="#f56c6c"
					keyName="name" :activeStyle="{
					color: '#303133',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}" :inactiveStyle="{
					color: '#606266',
					transform: 'scale(1)',
				}" itemStyle="padding:0 40rpx; height: 34px;">
				</u-tabs>
			</view>
			<view class="set" @click="show1=true">
				<image src="https://pw.qyang.cc/static/set.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="experts" v-for="(item,index) in orderList" :key="index">

			<view class="con2">
				<view class="l1">
					<image style="width: 26px;height: 26px;border-radius:50%;margin: 0 20rpx;" :src="item.user_avatar"
						mode="aspectFill"></image>
					{{item.user_nickname}}
					<image src="https://pw.qyang.cc/static/svg/icon-realname.svg" v-if="item.user_is_real"
						style="width: 30rpx;height: 30rpx;margin-left:18rpx;">
					</image>
					<view class="l1-sex1" v-if="item.user_gender == 1">
						<image src="https://pw.qyang.cc/static/sexW.png"
							style="width: 20rpx;height: 20rpx;margin-right: 4rpx;">
						</image>
						<span v-if="item.user_age">{{item.user_age}}</span>
					</view>
					<view class="l1-sex2" v-if="item.user_gender == 0">
						<image src="https://pw.qyang.cc/static/sexM.png"
							style="width: 20rpx;height: 20rpx; margin-right: 4rpx;">
						</image>
						<span v-if="item.user_age">{{item.user_age}}</span>
					</view>
				</view>

				<view class="status">
					<view class="status status0" v-if="item.status == 100">
						{{item.status_texts}}
					</view>
					<view class="status status1" v-if="item.status == 0">
						{{item.status_texts}}
					</view>
					<view class="status status2" v-if="item.status == 1">
						{{item.status_texts}}
					</view>
					<view class="status status3" v-if="item.status == 2">
						{{item.status_texts}}
					</view>
					<view class="status status4" v-if="item.status == 3 || item.status == 4 || item.status == 5 ">
						{{item.status_texts}}
					</view>
					<view class="status status5" v-if="item.status == 6">
						{{item.status_texts}}
					</view>
					<view class="status status6" v-if="item.status == '-1'">
						{{item.status_texts}}
					</view>
				</view>
			</view>

			<!-- 剩余时间 -->
			<view class="con5" v-if="item.status==1 || item.status==6">
				<view class="con5-1" v-if="item.isTime==0">
					<i class="iconfont" style="font-style:normal;margin-right: 10rpx;">&#xe65f;</i>
					剩余时间{{item.excessTime}}
				</view>
				<view class="con5-1 con5-11" v-if="item.isTime==1">
					<i class="iconfont" style="font-style:normal;margin-right: 10rpx;">&#xe65f;</i>
					已超时{{item.excessTime}}
				</view>
				<view class="con5-2" v-if="item.status==1">
					30分钟内，达人未接单，订单将自动取消
				</view>
				<!-- 		<view class="con5-2" v-if="item.status==2">
					30分钟内，未选择达人，系统将自动为你匹配
				</view> -->
			</view>

			<!-- 看电影 -->
			<view class="con1">
				<view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/order-icon-0.svg" mode=""></image>
					<view>{{item.title}}</view>
				</view>
				<view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/biao.svg" mode=""></image>
					<view>{{item.time_text}}</view>
				</view>
				<view class="con1-item">
					<image src="https://pw.qyang.cc/static/svg/dingwei.svg" mode=""></image>
					<view>{{item.address}}</view>
				</view>
				<view class="con1-item" v-if="item.type == 0">
					<image src="https://pw.qyang.cc/static/svg/order-icon-3.svg" mode=""></image>
					<view>{{item.level_title}}</view>

				</view>

			</view>



			<!-- 价格 -->
			<view class="con3">
				<view style="display: flex;align-items: center;">
					{{item.total_price}}元
					<span class="con3-text">
						（服务费:
						<span class="money">{{item.price}}元 </span>
						路费:
						<span class="money">{{item.address_price}}元
						</span>）
					</span>
				</view>
				<!-- <view class="con3-tab" v-if="item.status==3">
							<view class="dian"></view>待出发
						</view>
						<view class="con3-tab" v-if="item.status==4">
							<view class="dian"></view>已出发
						</view>
						<view class="con3-tab" v-if="item.status==5">
							<view class="dian"></view>已到达
						</view> -->

			</view>

			<view class="con3">
				<view style="display: flex;align-items: center;">

				</view>
				<view class="con3-tab" v-if="item.status==3">
					<view class="dian"></view>待出发
				</view>
				<view class="con3-tab" v-if="item.status==4">
					<view class="dian"></view>已出发
				</view>
				<view class="con3-tab" v-if="item.status==5">
					<view class="dian"></view>已到达
				</view>

			</view>

			<!-- 接单 -->
			<view class="order">
				<view class="">
					<!-- <view v-if="item.choose=='1'" class="choose">
							<view style="font-size: 50rpx;">•</view>
							<view class="goTxtCon">
								待客户选择
							</view>
						</view>
						<view v-if="item.choose=='2'" class="choose">
							<view style="font-size: 50rpx;">•</view>
							<view class="goTxtCon">
								未被选择
							</view>
						</view> -->
				</view>
				<view class="" style="display: flex;">
					<view class="orderImg" @click="toPhone(item.user_mobile)">
						<image src="https://pw.qyang.cc/static/icon-phone.png" mode=""></image>
					</view>
					<view class="orderImg" @click="toMessage(item)">
						<image src="https://pw.qyang.cc/static/svg/chat.svg" mode=""></image>
					</view>
					<view v-if="item.status=='0' ||item.status=='1' || item.status=='3'" @click="cancelOrder(item)"
						class="orderCancel">
						取消订单
					</view>
					<view v-if="item.status=='4'||item.status=='5'||item.status=='6'" @click="toPhone('110')"
						class="orderCancel">
						求助
					</view>
					<view v-if=" item.status==100 && item.eva_daren_status==0" class="orderCancel"
						style="background: #FF5866; color: #FFFFFF;" @click="commentOrder(item)">
						写评价
					</view>
					<view v-if=" item.eva_status==1" class="orderCancel" @click="lookEvaluate(item)">
						评价我
					</view>
					<view v-if="item.status=='-1'" class="orderCancel" @click="delOrder(item)">
						删除订单
					</view>
					<view v-if="item.status=='1'" class="orderTxt" @click="setOrderStatus(item,3)">
						接单
					</view>
					<view v-if="item.status=='3'" class="orderTxt" @click="showGoPop(item)">
						出发
					</view>
					<view v-if="item.status=='4'" class="orderTxt" @click="showArrivePop(item)">
						到达
					</view>
					<view v-if="item.status=='5'" class="orderTxt" @click="writeOff(item)">
						核销
					</view>
				</view>


			</view>

		</view>
		<!-- 出发弹窗 -->
		<u-popup :show="show" :round="10" mode="bottom" @close="show = false;" @open="show=true" :closeable='true'>
			<view class="confirmAddress">
				<view class="confirm">确认地址信息</view>
				<view class="" style="padding: 0 50rpx;">
					<text class="myaddress" style="font-size: 30rpx;">客户地址</text>
					<view class="customer">
						<view class="customer1">
							{{addressInfo.province}}-{{addressInfo.city}}-{{addressInfo.district}}
						</view>
						<view class="customer2">
							{{addressInfo.address}}
						</view>
					</view>
				</view>

				<view class="" style="padding: 0 50rpx;">
					<view class="location" style="margin-bottom: 20rpx;">

						<view class="myaddress" style="display: flex;align-items: center; ">
							<view class="" style="font-size: 30rpx;">
								我的地址
							</view>
						</view>
						<view class="" style="display: flex; font-size: 28rpx;  align-items: center; "
							@click="getMyAddress(true)">
							{{reloadText}}
							<u-icon name="reload"></u-icon>
						</view>

					</view>
					<view class="customer">
						<view class="customer1">
							{{myAddress.province}}-{{myAddress.city}}-{{myAddress.district}}
						</view>
						<view class="customer2">
							{{myAddress.address}}
						</view>
					</view>
				</view>
				<view class="">
					<view class=""
						style="display: flex;justify-content: space-between;font-size: 30rpx; margin-top: 20rpx;padding: 0 50rpx;">
						<view>
							距离
						</view>
						<view class="">

							{{address_juli}}km
						</view>
					</view>

				</view>

				<view class="popBtn">
					<view class="cancelBtn" @click="() => { show = false; }">
						取消
					</view>
					<view class=confirmBtn @click="doSetOrderStatus(addressInfo,4)">
						确认出发
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 到达弹窗 -->
		<u-popup :show="showArrive" :round="10" mode="bottom" @close="closeArrive" @open="showArrive=true"
			:closeable='true'>
			<view class="confirmArrive">
				<view class="confirm">确认到达</view>
				<view class="" style="padding: 0 50rpx;display: flex;align-items: center;">
					<text class="myaddress">上传图片</text>
					<text style="font-size: 24rpx;color: #999;">(最多上传6张)</text>


				</view>
				<view class="upImage" style="padding: 0 50rpx;">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="6">
						<view class="btn">
							<image src="https://pw.qyang.cc/static/pic-add.png" mode=""></image> 添加图片/视频
						</view>
					</u-upload>
				</view>

				<view class="location" style="padding: 0 50rpx;">
					<view class="" style="display: flex;align-items: center;">
						<view class="">
							<image src="https://pw.qyang.cc/static/location.png" mode=""
								style="width: 26rpx;height: 30rpx;display: block;margin-right: 10rpx;"></image>
						</view>
						<view class="" style="font-size: 28rpx;">
							{{myAddress.shortname}}
						</view>
					</view>
					<view class="" style="display: flex;font-size: 28rpx;" @click="getMyAddress(true)">
						{{reloadText}}
						<u-icon name="reload"></u-icon>
					</view>
				</view>
				<view class="popBtn">
					<view class="cancelBtn" @click="closeArrive">
						取消
					</view>
					<view class=confirmBtn @click="doSetOrderStatus(addressInfo,5)">
						确认到达
					</view>
				</view>
			</view>
		</u-popup>



		<!-- 核销弹窗 -->
		<u-popup :show="showOff" :round="10" mode="bottom" @close="() => {code=''; showOff = false; }"
			@open="showOff=true" :closeable='true'>
			<view class="confirmArrive">
				<view class="confirm">核销</view>
				<view class="" style="padding: 0 50rpx;font-size: 30rpx;margin: 60rpx 0 20rpx 0;">
					核销码
				</view>
				<view class="writeOffMa">
					<u-input class="writeOffCon" v-model="code" border="none" placeholder="请输入"></u-input>
					<image src="https://pw.qyang.cc/static/saoma.png" mode="aspectFill" @click="saoma()"></image>
				</view>


				<view class="location" style="padding: 0 50rpx;">

					<view class="" style="display: flex;align-items: center;">
						<view class="">
							<image src="https://pw.qyang.cc/static/location.png" mode=""
								style="width: 26rpx;height: 30rpx;display: block;margin-right: 10rpx;"></image>
						</view>
						<view class="" style="font-size: 28rpx;">
							{{myAddress.shortname}}
						</view>
					</view>
					<view class="" style="display: flex;font-size: 28rpx;" @click="getMyAddress(true)">
						{{reloadText}}
						<u-icon name="reload"></u-icon>
					</view>

				</view>
				<view class="popBtn">
					<view class="cancelBtn" @click="code='';showOff = false; ">
						取消
					</view>
					<view class=confirmBtn @click="doSetOrderStatus(hexiaoInfo,6)">
						确认完成
					</view>
				</view>
			</view>
		</u-popup>


		<!-- 服务完成弹窗 -->

		<u-popup :show="showComplete" :round="10" mode="bottom" @close="() => { fileList2=[];showComplete = false; }"
			@open="showComplete=true" :closeable='true'>
			<view class="confirmArrive">
				<view class="confirm">完成确认</view>
				<view class="" style="padding: 0 50rpx;display: flex;align-items: center;">
					<text class="myaddress">上传图片</text>
					<text style="font-size: 24rpx;color: #999;">(最多上传6张)</text>
				</view>
				<view class="upImage" style="padding: 0 50rpx;">
					<u-upload :fileList="fileList2" @afterRead="afterRead1" @delete="deletePic1" name="1" multiple
						:maxCount="6">
						<view class="btn">
							<image src="https://pw.qyang.cc/static/pic-add.png" mode=""></image> 添加图片/视频
						</view>
					</u-upload>
				</view>

				<view class="location" style="padding: 0 50rpx;">

					<view class="" style="display: flex;align-items: center;">
						<view class="">
							<image src="https://pw.qyang.cc/static/location.png" mode=""
								style="width: 26rpx;height: 30rpx;display: block;margin-right: 10rpx;"></image>
						</view>
						<view class="" style="font-size: 28rpx;">
							{{myAddress.shortname}}
						</view>
					</view>
					<view class="" style="display: flex;font-size: 28rpx;" @click="getMyAddress(true)">
						{{reloadText}}
						<u-icon name="reload"></u-icon>
					</view>

				</view>
				<view class="popBtn">
					<view class="cancelBtn" @click="() => { fileList2=[];showComplete = false; }">
						取消
					</view>
					<view class=confirmBtn @click="doSetOrderStatus(overInfo,100)">
						确认完成
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show1" :round="10" mode="bottom" :closeable="true" @close="show1=false" @open="show1=true">
			<view class="pop-content">
				<view class="title">
					筛选项
				</view>
				<view class="title-1">
					服务名
					<input class="input" type="text" v-model="searchContent" placeholder="请输入" />
				</view>
				<view class="title-1">
					订单状态
					<view class="status1">
						<view class="status-item " v-for="(i,index) in tablist" :key="index"
							:class="{ 'active': isSelected1 === index }" @click="selectTab1(index)">
							{{i.name}}
						</view>
					</view>
				</view>
				<view class="title-1">
					下单时间
					<view class="time">
						<view class="time1 mr" @click="showTimeStart=true">
							<view v-if="!start_time">
								开始日期
							</view>
							<view v-else>
								{{formatDate(start_time)}}
							</view>
						</view>
						<view class="time1" @click="showTimeEnd=true">
							<view v-if="!end_time">
								结束日期
							</view>
							<view v-else>
								{{formatDate(end_time)}}
							</view>
						</view>
						<u-datetime-picker style="z-index: 999;" :show="showTimeStart" mode="date"
							@cancel="showTimeStart=false" @confirm="choosetime1"
							:formatter="formatter"></u-datetime-picker>
						<u-datetime-picker :show="showTimeEnd" mode="date" @cancel="showTimeEnd=false"
							@confirm="choosetime2" :formatter="formatter"></u-datetime-picker>
					</view>
				</view>
				<view class="pop-bottom">
					<view class="btn1" @click="reSetSearch()">
						重置
					</view>
					<view class="btn2" @click="confirmfilter">
						确认
					</view>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {
		name: 'expertsWork',

		data() {
			return {
				address_juli: 0,
				currentTab: 0,
				showTimeStart: false,
				showTimeEnd: false,
				value1: '',
				start_time: '',
				end_time: '',
				isSelected1: '',
				overInfo: {},
				hexiaoInfo: {},
				reloadText: "更新定位",
				addressInfo: {},
				myAddress: {},
				fileList1: [],
				fileList2: [],
				searchContent: '',
				show: false,
				show1: false,
				showOff: false,
				showArrive: false,
				showComplete: false,
				isOverdue: false,
				orderList: [],
				orderData: [],
				filteredExpertsList: [], // 用于存储根据tab点击筛选后的专家列表数据
				expertsList: [],
				tablist: [{
						name: '全部',
						array: [],
					}, {
						name: '待付款',
						array: [0],
					}, {
						name: '待接单',
						array: [1],
					},
					// {
					// 	name: '选达人',
					// 	array:[2],
					// }, 
					{
						name: '已接单',
						array: [3, 4, 5],
					}, {
						name: '服务中',
						array: [6],
					},
					{
						name: '已完成',
						array: [100],
					}, {
						name: '已取消',
						array: [-1],
					}
				],
				lng: "",
				lat: "",
				image: "",
				code: "",
				start_time: '',
				end_time: ''
			}
		},
		created() {
			// const self = this;
			// // 调用clickService方法，传入模拟点击全部按钮的参数，使其默认展示全部数据
			// const defaultTabClickEvent = {
			// 	status: '10'
			// };
			// self.clickService(defaultTabClickEvent);
			// setInterval(() => {
			// 	self.expertsList.forEach(item => {
			// 		const duration = self.calculateRemainingTime(item.time);
			// 		item.isOverdue = duration.indexOf('已超时') === 0;
			// 		console.log('更新 item:', item.name, '的 isOverdue 值为:', item.isOverdue); // 添加这行打印语句
			// 	});
			// 	self.$forceUpdate();
			// }, 60000);
			this.getMyAddress(true);

			uni.$on('update', () => {
				this.getData()
			})
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			closeArrive() {
				this.fileList1 = [];
				this.showArrive = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`;
				}
				if (type === 'month') {
					return `${value}月`;
				}
				if (type === 'day') {
					return `${value}日`;
				}
				if (type === 'hour') {
					return `${value}时`;
				}
				if (type === 'minute') {
					return `${value}分`;
				}
				return value;
			},
			commentOrder(order) {
				uni.navigateTo({
					url: '/subpages/myOrder/commentOrder?type=1&id=' + order.id
				})
			},
			reSetSearch() {
				this.start_time = ''
				this.end_time = ''
				this.isSelected1 = '';
				this.searchContent = ''
			},
			formatDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');

				return `${year}-${month}-${day}`;
			},
			confirmfilter() {
				console.log(111)
				if (this.isSelected1) {
					this.currentTab = this.isSelected1
					this.statusArr = this.tablist[this.isSelected1].array
				}
				this.show = false
				this.show1 = false
				this.page = 1
				this.getList()
			},
			saoma() {
				var that = this
				uni.scanCode({
					success: function(res) {
						that.code = res.result
						// console.log('条码被扫描结果', res.result);
					},
					fail: function(err) {
						console.error('扫码失败', err);
					}
				});
			},
			getMyAddress(q) {
				this.reloadText = "更新中~";
				if (!q && uni.getStorageSync('myaddress')) {
					this.myAddress = uni.getStorageSync('myaddress')
					this.lng = this.myAddress.lng
					this.lat = this.myAddress.lat
					this.reloadText = "更新定位"
				} else {
					var that = this
					uni.getLocation({
						type: 'gcj02',
						isHighAccuracy: true,
						success: r => {
							uni.setStorageSync("dingwei", {
								lat: r.latitude,
								lng: r.longitude
							})
							that.lng = r.longitude
							that.lat = r.latitude
							that.rq.getData('daren/getAddress', {
								lng: r.longitude,
								lat: r.latitude
							}).then(res => {
								if (res.code == 1 && res.data.pois && res.data.pois[0] && res.data
									.pois[0].ad_info) {
									var dw = {
										// id: res.data.id,
										shortname: res.data.pois[0].ad_info.city,
										lat: r.latitude,
										lng: r.longitude,
										province: res.data.pois[0].ad_info.province,
										city: res.data.pois[0].ad_info.city,
										district: res.data.pois[0].ad_info.district,
										address: res.data.pois[0].address,
									}
									that.myAddress = dw
									uni.setStorageSync('myaddress', dw)
								} else {
									uni.showToast({
										title: "地址信息获取失败"
									})
								}

								this.reloadText = "更新定位"
							})
						},
						fail: (err) => {
							console.log(err)
							this.reloadText = "更新定位"
						},
						complete: () => {}
					});
				}
			},
			setOrderStatus(item, status) {
				var that = this
				var str = '';
				if (status == 3) {
					str = '接单'
				} else if (status == 4) {
					str = '出发'
				} else if (status == 5) {
					str = '到达'
				} else if (status == 6) {
					str = '核销'
				}
				uni.showModal({
					title: str,
					content: "请确认" + str + '~',
					success(res) {
						if (res.confirm) {
							that.doSetOrderStatus(item, status)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})

			},
			doSetOrderStatus(item, status) {
				var that = this
				var image = '';
				if (status == 5) {
					var imageArr = [];
					if (this.fileList1.length == 0) {
						uni.showToast({
							title: '请上传图片或视频',
							icon: 'none'
						})
						return;
					}
					for (var it of this.fileList1) {
						imageArr.push(it.url)
					}
					image = imageArr.join(',')
				}
				if (status == 100) {
					var imageArr = [];
					if (this.fileList2.length == 0) {
						uni.showToast({
							title: '请上传图片或视频',
							icon: 'none'
						})
						return;
					}
					for (var it of this.fileList2) {
						imageArr.push(it.url)
					}
					image = imageArr.join(',')
				}
				this.rq.getData('order/setStatus', {
					order_id: item.id,
					status: status,
					lng: this.lng,
					lat: this.lat,
					image: image,
					code: this.code,

				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.showArrive = false
					this.showOff = false
					this.showComplete = false
					that.getData()
				})
			},
			delOrder(item) {
				var that = this
				uni.showModal({
					title: "删除订单",
					content: "请确认删除订单~",
					success(res) {
						if (res.confirm) {
							that.doDelOrder(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			},
			doDelOrder(item) {
				var that = this
				this.rq.getData('order/del', {
					order_id: item.id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					that.getData()
				})
			},
			getData() {
				this.show = false
				this.show1 = false
				// this.lng=126.66287
				// this.lat=45.879075
				this.page = 1
				this.getList()
			},
			getList() {

				var that = this;
				var page = this.page;
				if (!page) {
					page = 1
				}
				if (this.page == 1) {
					this.orderList = [];
				}
				if (this.orderData.last_page && page > 1 && page > this.orderData.last_page) {
					return;
				}
				var data = {
					text: this.searchContent,
					status: this.statusArr,
					type: 'daren',
					page: page
				}
				if (this.start_time) {
					data.createtime_start = this.start_time
				}
				if (this.end_time) {
					data.createtime_end = this.end_time
				}
				this.rq.getData('order/getOrderList', data).then(res => {
					if (res.code == 1) {
						this.orderList = this.orderList.concat(res.data.data);
						this.orderData = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			goChat() {
				uni.navigateTo({
					url: '/pages/workbench/chat'
				})
			},
			selectTab1(index) {
				this.isSelected1 = index
			},
			lookEvaluate(item) {
				uni.navigateTo({
					url: '/pages/workbench/lookevaluate?type=2&id=' + item.id
				})
			},
			completeShow(item) {
				this.overInfo = item
				this.showComplete = true
			},
			evaluate(item) {
				uni.navigateTo({
					url: '/pages/workbench/evaluate?type=1&id=' + item.id
				})
			},
			writeOff(item) {
				this.hexiaoInfo = item
				this.showOff = true
			},
			// 删除图片
			deletePic(event) {
				console.log(event, "event")
				this.fileList1.splice(event.index, 1)
			},
			deletePic1(event) {
				console.log(event, "event")
				this.fileList2.splice(event.index, 1)
			},
			// 新增图片
			afterRead(event) {
				uni.showLoading({
					mask: true,
					title: '正在上传'
				})
				console.log("urls")
				var _this = this
				var app = getApp()
				for (let i = 0; i < event.file.length; i++) {

					app.uploadFile([event.file[i].url], {}, (url) => {
						console.log(url)
						_this.fileList1.push({
							url: url
						})
						uni.hideLoading()
					})
				}


			},
			afterRead1(event) {
				uni.showLoading({
					mask: true,
					title: '正在上传'
				})
				var _this = this
				var app = getApp()
				for (let i = 0; i < event.file.length; i++) {
					app.uploadFile([event.file[i].url], {}, (url) => {
						console.log(url)
						_this.fileList2.push({
							url: url
						})
						uni.hideLoading()
					})
					// this.fileList2.push(
					// 	event.file[i]
					// )
				}
			},
			showArrivePop(item) {
				this.addressInfo = item
				this.showArrive = true
			},
			cancelBtn() {
				this.show = false
			},
			confirmBtn() {
				console.log(1111);
			},
			showGoPop(item) {
				this.addressInfo = item
				this.address_juli = this.calculateDistance(this.myAddress.lng, this.myAddress.lat, item.lng, item.lat)
				this.show = true
			},
			close() {
				this.show = false
				// console.log('close');
			},
			clickService(e) {
				this.statusArr = e.array
				this.page = 1
				this.getList()
			},

			timeStrToTimestamp(timeStr) {
				const [hourStr, minuteStr] = timeStr.match(/\d+/g); // 提取小时和分钟数字部分
				const hour = parseInt(hourStr);
				const minute = parseInt(minuteStr);
				const date = new Date();
				date.setHours(hour + (timeStr.startsWith('晚') ? 12 : 0)); // 如果是'晚'开头，转换为24小时制
				date.setMinutes(minute);
				date.setSeconds(0);
				date.setMilliseconds(0);
				return date.getTime();
			},
			calculateRemainingTime(itemTime) {
				const now = Date.now(); // 获取当前时间的时间戳（单位：毫秒）
				const targetTimeStamp = this.timeStrToTimestamp(itemTime); // 获取目标时间的时间戳
				const duration = targetTimeStamp - now; // 计算时间差（单位：毫秒）

				const isOverdue = duration < 0; // 此处获取当前是否超时的状态
				// console.log('当前 itemTime:', itemTime, '，isOverdue:', isOverdue); // 添加这行打印语句
				if (isOverdue) {
					const overHours = Math.abs(Math.floor(duration / (1000 * 60 * 60)));
					const overMinutes = Math.abs(Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60)));
					const formattedOverHours = overHours < 10 ? `0${overHours}` : `${overHours}`;
					const formattedOverMinutes = overMinutes < 10 ? `0${overMinutes}` : `${overMinutes}`;
					return `已超时：${formattedOverHours}:${formattedOverMinutes}`;
				} else {
					const hours = Math.floor(duration / (1000 * 60 * 60)); // 提取小时数
					const minutes = Math.floor((duration % (1000 * 60 * 60)) / (1000 * 60)); // 提取分钟数
					const remainingHours = hours < 10 ? `0${hours}` : `${hours}`; // 格式化小时数，不足两位补0
					const remainingMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`; // 格式化分钟数，不足两位补0
					return `剩余时间：${remainingHours}:${remainingMinutes}`; // 返回格式化后的剩余时间（HH:mm格式）
				}

			},
			toPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone, // 电话号码
					success: function() {
						console.log('拨打电话成功！');
					},
					fail: function(err) {
						console.error('拨打电话失败：', err);
					}
				});
			},
			toMessage(item) {
				uni.navigateTo({
					url: "/subpages/message/chat?id=" + item.user_id + "&address=" + item.address + "&lng=" + item
						.lng + "&lat=" + item.lat + "&type=order"
				})

			},
			// calculateDistance(x1, y1, x2, y2) {

			// 	console.log(x1+'---'+ y1+'---'+ x2+'---'+ y2,"经纬度")
			// 	const a = x2 - x1;
			// 	const b = y2 - y1;
			// 	return Math.sqrt(a ** 2 + b ** 2).toFixed(2);

			// },

			calculateDistance(lat1, lon1, lat2, lon2) {
				if ((lat1 == lat2) && (lon1 == lon2)) {
					return 0;
				} else {
					var radlat1 = Math.PI * lat1 / 180;
					var radlat2 = Math.PI * lat2 / 180;
					var theta = lon1 - lon2;
					var radtheta = Math.PI * theta / 180;
					var dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(
						radtheta);
					dist = Math.acos(dist);
					dist = dist * 180 / Math.PI;
					dist = dist * 60 * 1.1515; // 转换为公里
					return dist.toFixed(2);
				}
			},

			choosetime1(e) {
				this.showTimeStart = false
				this.start_time = e.value

			},
			choosetime2(e) {
				this.end_time = e.value
				this.showTimeEnd = false
			},
			cancelOrder(item) {

				var that = this
				uni.showModal({
					title: "取消订单",
					content: "确认取消该订单~",
					success(res) {
						if (res.confirm) {
							that.doCancelOrder(item)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
			},
			doCancelOrder(order) {
				var that = this
				this.rq.getData("order/cancel", {
					order_id: order.id
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: res.msg
						})
						that.getData()
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pop-content-detail {
		width: 100%;
		height: 80vh;
		overflow-y: scroll;
		padding: 36rpx 0 60rpx 0;
		font-family: PingFang SC;
		font-size: 15px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		background-color: #F7F7F7;

		.content-title {
			text-align: center;
		}

		.content-detail {
			padding: 40rpx 0;
		}
	}

	.pop-content {
		width: 100%;
		padding: 36rpx 0 120rpx 0;
		font-family: PingFang SC;
		font-size: 15px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		color: #333333;
		// z-index: 99;

		.title {
			text-align: center;
		}

		.title-1 {
			margin: 10rpx 30rpx;

			.input {
				width: 89.07%;
				height: 34px;
				border-radius: 8px;
				opacity: 1;
				background: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: start;
				line-height: 34px;
				padding: 0 20rpx;
				margin: 20rpx 0;
			}

			.status1 {
				display: flex;
				flex-wrap: wrap;
				margin: 20rpx 0;
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				line-height: 15px;
				text-align: center;
				letter-spacing: 0px;

				color: #999999;

				.status-item {
					width: 100px;
					height: 40px;
					border-radius: 8px;
					opacity: 1;
					background: #F6F6F6;
					margin: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.status-item.active {
					background: #ff5866;
					color: #ffffff;
				}

			}

			.time {
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				line-height: 15px;
				text-align: center;
				letter-spacing: 0px;
				color: #999999;
				display: flex;
				align-items: center;
				// justify-content: center;
				margin: 20rpx 0;

				.time1 {
					width: 145px;
					height: 40px;
					border-radius: 8px;
					opacity: 1;
					background: #F6F6F6;
					font-family: PingFang SC;
					font-size: 13px;
					font-weight: normal;
					line-height: 15px;
					text-align: center;
					letter-spacing: 0px;
					color: #999999;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 10rpx;
					// margin: 0 30rpx;
				}

				.mr {
					margin-right: 66rpx;
					/* 让第一个元素靠左 */
				}

			}
		}

		.pop-bottom {
			position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-size: 15px;
			font-weight: normal;
			line-height: 15px;
			text-align: center;
			letter-spacing: 0px;
			height: 60px;
			width: 100%;
			justify-content: center;
			background: #FFFFFF;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);

			.btn1 {
				width: 133px;
				height: 37px;
				border-radius: 102px;
				opacity: 1;
				background: #F7F7F7;
				border: 1px solid #F7F7F7;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 80rpx;
			}

			.btn2 {
				color: #ffffff;
				width: 133px;
				height: 37px;
				border-radius: 102px;
				opacity: 1;
				background: #FF5866;
				border: 1px solid #FF5866;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}



	.bg-overdue {
		background-color: #FF5866;
	}

	.bg-normal {
		background-color: #00BC56;
	}

	.writeOffMa {
		margin: 0 50rpx;
		background-color: #F6F6F6;
		border-radius: 14rpx;
		display: flex;
		align-items: center;
		height: 75rpx;
		padding: 0 20rpx;
		border: 1rpx solid #ddd;

		image {
			width: 36rpx;
			height: 36rpx;
			margin-right: 20rpx;
			// position: absolute;
			// top: 210rpx;
			// right: 75rpx;
		}

		.writeOffCon {
			border: none;
			height: 88rpx;

		}


	}


	.confirmArrive {
		height: 700rpx;
		// z-index: 9999;
	}

	.location {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.upImage {
		padding: 15rpx 25rpx;

		.btn {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8px;
			opacity: 1;
			background: #F7F7F7;
			box-sizing: border-box;
			border: 0.5px solid #C4C4C4;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 10px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;

			color: #B8B8B8;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.popBtn {
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
		position: absolute;
		bottom: 80rpx;

		.cancelBtn {
			width: 266rpx;
			height: 74rpx;
			line-height: 72rpx;
			text-align: center;
			background: #F7F7F7;
			border: 2rpx solid #F7F7F7;
			border-radius: 200rpx;
		}

		.confirmBtn {
			width: 266rpx;
			height: 74rpx;
			line-height: 72rpx;
			text-align: center;
			background: #FF5866;
			border: 2rpx solid #FF5866;
			border-radius: 200rpx;
			color: #fff;
		}
	}

	.confirmAddress {
		height: 980rpx;
		// z-index: 99;
		// position: relative;
		// padding: 0 50rpx;
	}

	.confirm {
		text-align: center;
		font-size: 30rpx;
		margin: 30rpx 0;

	}

	.customer {
		background-color: #F6F6F6;
		border-radius: 16rpx;
		// height: 124rpx;
		padding: 20rpx;

		.customer1 {
			font-size: 28rpx;
			color: #333333;
			margin: 10rpx 0;
		}

		.customer2 {
			font-size: 26rpx;
			color: #999999;
			margin-bottom: 10rpx;
		}
	}

	.myaddress {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin: 20rpx 0;
	}

	.tabsdaren-content {
		background-color: #F7F7F7;
		width: 100%;
		border-radius: 14rpx 14rpx 0 0;
		// z-index:3;
		position: relative
	}

	.tabsdaren {
		background-color: #fff;
		border-radius: 14rpx 14rpx 0 0;
		position: relative;
		z-index: 19;
		// top: 560rpx;
		// top: 460rpx;
		width: 100%;
		height: 100rpx;
		padding-top: 20rpx;
		display: flex;

		.tabsdaren-1 {
			position: relative;
			// padding-right: 110rpx;
			width: 650rpx;
			z-index: 20;
		}

		.set {
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			line-height: 120rpx;
			background-color: #fff;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 2222;

			image {
				z-index: 22;
				width: 35rpx;
				height: 35rpx;
			}

		}

	}

	.choose {

		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #00BC56;
	}

	.goTxt {
		display: flex;
		align-items: flex-end;
		font-size: 28rpx;
		color: #00BC56;
	}


	.bg-remaining {
		background-color: #00BC56;
	}


	.cancelOrderTxt {
		color: #FF7681;
		font-size: 26rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.timeLeft {
		display: flex;
		background-color: #00BC56;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 26rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 14rpx;
		margin: 20rpx 0;

		.timeLeftImg {
			width: 28rpx;
			height: 28rpx;
			margin-right: 20rpx;

			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.order {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.orderImg {
			width: 44rpx;
			height: 44rpx;
			margin-right: 12rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				display: block;
			}
		}

		.orderTxt {
			background: #FF5866;
			color: #fff;
			width: 150rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			border-radius: 50rpx;
			margin-left: 10rpx;
		}

		.orderCancel {
			background: #F7F7F7;
			color: #000;
			width: 150rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-size: 24rpx;
			border-radius: 50rpx;
			margin-left: 10rpx;
		}
	}



	.price {
		display: flex;
		align-items: flex-end;
		margin-top: 20rpx;
	}

	.totalPrice {
		color: #FF5866;
		font-size: 32rpx;
		// margin-right: 20rpx;
	}

	.service-text {
		font-size: 28rpx;
		color: #999999;
	}

	.service-amount {
		font-size: 28rpx;
		color: #333333;
	}

	.price {
		display: flex;
	}

	.expertsVip {
		width: 27rpx;
		height: 30rpx;
		margin-right: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}



	.work {
		background: #FFF6F9;

		border-radius: 16rpx;
		padding: 10rpx 20rpx;
	}

	.experts {
		position: relative;
		// width: 90%;
		background-color: #fff;
		margin: 20rpx 30rpx;
		padding: 20rpx;
	}

	.expertAn {
		display: flex;
		margin-bottom: 20rpx;

		.avatarImg {
			width: 32rpx;
			height: 32rpx;
			margin-right: 16rpx;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.expertsName {
			font-size: 32rpx;
			font-weight: bold;
			color: #000;
			margin-right: 20rpx;
		}

		.expertsAge {
			display: flex;
			align-items: center;
			justify-content: center;
			background: rgba(253, 168, 175, 0.2);
			width: 84rpx;
			border-radius: 50rpx;

			.expertsAgeImg {
				width: 20rpx;
				height: 20rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.expertsAgeTxt {
				font-size: 22rpx;
				color: #FF7681;
				margin-left: 5rpx;
			}
		}
	}

	.expertDetail {
		display: flex;
		margin: 30rpx 0;
		// align-items: center;

		.contentImg {
			width: 27rpx;
			height: 27rpx;
			margin-right: 20rpx;

			image {
				display: block;
				width: 100%;
				height: 100%;

			}
		}

		.contentTxt {
			display: flex;
			font-size: 26rpx;
			line-height: 27rpx;
			height: 27rpx;

			view {
				margin-right: 20rpx;
			}
		}


	}

	.con1 {
		width: 315px;
		height: 42.62%;
		border-radius: 8px;
		opacity: 1;

		background: #FFF6F9;
		font-family: 阿里巴巴普惠体 2.0;
		font-size: 13px;
		font-weight: normal;
		line-height: 12px;
		letter-spacing: 0px;

		color: #333333;
		padding: 20rpx;
		margin: 0 auto;

		image {
			width: 12px;
			height: 12px;
			margin-right: 20rpx;
		}

		.con1-item {
			height: 40rpx;
			display: flex;
			align-items: center;

			view {
				width: 580rpx;
				white-space: nowrap;
				/* 防止文本换行 */
				overflow: hidden;
				/* 隐藏超出容器的文本 */
				text-overflow: ellipsis;
				/* 显示省略号 */
			}

			;
		}
	}

	.con2 {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.l1 {
			width: 100%;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 16px;
			font-weight: 500;
			line-height: 17px;
			letter-spacing: 0px;

			color: #000000;
			display: flex;
			align-items: center;
			position: relative;

			.l1-sex1 {
				display: flex;
				width: 42px;
				height: 16px;
				margin-left: 16rpx;
				border-radius: 88px;
				opacity: 1;
				background: rgba(116, 220, 254, 0.2);

				font-size: 11px;
				font-weight: 500;
				line-height: 15px;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 0px;
				color: #2BC1F1;

			}

			.l1-sex2 {
				display: flex;
				width: 42px;
				height: 16px;
				border-radius: 88px;
				opacity: 1;
				margin-left: 16rpx;
				background: rgba(253, 168, 175, 0.2);

				font-size: 11px;
				font-weight: 500;
				line-height: 15px;
				display: flex;
				align-items: center;
				justify-content: center;
				letter-spacing: 0px;
				color: #FDA8AF;

			}
		}
	}

	.con3 {
		// padding: 20rpx auto;
		/* 900元 */
		font-family: 阿里巴巴普惠体 2.0;
		font-weight: 500;
		font-size: 14px;

		color: #FF5866;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		// width: 600rpx;

		.con3-tab {
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 14px;
			font-weight: normal;
			line-height: 12px;
			text-align: center;
			letter-spacing: 0px;
			color: #00BC56;
			display: flex;
			align-items: center;

			.dian {
				width: 16rpx;
				height: 16rpx;
				opacity: 1;
				background: #00BC56;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}

		.con3-text {
			font-size: 12px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;
			margin: 0 10rpx;
			color: #999999;

			.money {
				color: #333333;
				margin: 0 10rpx;
			}

		}
	}

	.status {
		color: #fff;
		background: #84E28C;
		width: 110rpx;
		height: 50rpx;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 26rpx;
		border-radius: 0px 16rpx 0px 16rpx;
		text-align: center;
		line-height: 50rpx;

		&.status0 {
			background: #FF7681;
		}

		&.status1 {
			background: #FFB72B;
		}

		&.status2 {
			background: #84E28C;
		}

		&.status3 {
			background: #84E28C;
		}

		&.status4 {
			background: #75D4F9;
		}

		&.status5 {
			background: #AE9CFE;
		}

		&.status6 {
			background: #D1D1D6;
		}
	}



	.experts {
		padding: 30rpx 30rpx 36rpx;


		.con4 {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin: 0 auto 30rpx;
			width: 315px;

			.con4-btn {
				width: 75px;
				height: 48rpx;
				border-radius: 102px;
				opacity: 1;
				background: #F7F7F7;
				border: 1px solid #F7F7F7;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 12px;
				font-weight: normal;
				line-height: 12px;
				text-align: center;
				letter-spacing: 0px;
				color: #333333;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.con5 {
			margin: 0 auto 30rpx;
			width: 315px;

			.con5-1 {
				width: 315px;
				height: 25px;
				border-radius: 7px;
				opacity: 1;

				background: #00BC56;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 13px;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;

				color: #FFFFFF;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 20rpx;
				}
			}

			.con5-11 {
				background: #FF5866;
			}

			.con5-2 {
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 13px;
				font-weight: normal;
				line-height: 12px;
				letter-spacing: 0px;
				text-align: center;
				color: #FF7681;
				margin-top: 20rpx;
			}
		}

		.con3 {
			padding: 20rpx auto;

			/* 900元 */
			font-family: 阿里巴巴普惠体 2.0;
			font-weight: 500;
			font-size: 14px;

			color: #FF5866;
			margin: 24rpx 0 30rpx;

			.con3-text {
				font-size: 12px;
				font-weight: normal;
				line-height: 14px;
				letter-spacing: 0px;
				margin: 0 10rpx;
				color: #999999;

				.money {
					color: #333333;
					margin: 0 10rpx;
				}
			}
		}

		.con1 {
			width: 315px;
			height: 42.62%;
			border-radius: 8px;
			opacity: 1;

			background: #FFF6F9;
			font-family: 阿里巴巴普惠体 2.0;
			font-size: 13px;
			font-weight: normal;
			line-height: 12px;
			letter-spacing: 0px;

			color: #333333;
			padding: 20rpx;
			margin: 0 auto;

			image {
				width: 12px;
				height: 12px;
				margin-right: 20rpx;
			}

			.con1-item {
				height: 40rpx;
				display: flex;
				align-items: center;

				view {
					width: 580rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏超出容器的文本 */
					text-overflow: ellipsis;
					/* 显示省略号 */
				}

				;
			}
		}

		.con2 {
			display: flex;
			align-items: center;
			// padding: 20rpx 0;

			.l1 {
				width: 100%;
				font-family: 阿里巴巴普惠体 2.0;
				font-size: 16px;
				font-weight: 500;
				line-height: 17px;
				letter-spacing: 0px;

				color: #000000;
				display: flex;
				align-items: center;
				position: relative;

				.l1-sex1 {
					display: flex;
					width: 42px;
					height: 16px;
					border-radius: 88px;
					opacity: 1;
					background: rgba(116, 220, 254, 0.2);
					margin-left: 16rpx;

					font-size: 11px;
					font-weight: 500;
					line-height: 15px;
					display: flex;
					align-items: center;
					justify-content: center;
					letter-spacing: 0px;
					color: #2BC1F1;

				}

				.l1-sex2 {
					display: flex;
					width: 42px;
					height: 16px;
					border-radius: 88px;
					opacity: 1;
					margin-left: 20rpx;

					background: rgba(253, 168, 175, 0.2);

					font-size: 11px;
					font-weight: 500;
					line-height: 15px;
					display: flex;
					align-items: center;
					justify-content: center;
					letter-spacing: 0px;
					color: #FDA8AF;

				}
			}
		}

		.status {
			position: absolute;
			right: 0;
			width: 54.64px;
			height: 24.72px;
			border-radius: 0px 8px 0px 8px;
			opacity: 1;
			font-size: 13px;
			font-weight: 500;
			line-height: 12px;
			text-align: center;
			letter-spacing: 0px;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			.status0 {
				background: #FF7681;
			}

			.status1 {
				background: #FFB72B;
			}

			.status2 {
				background: #84E28C;
			}

			.status3 {
				background: #84E28C;
			}

			.status4 {
				background: #75D4F9;
			}

			.status5 {
				background: #AE9CFE;
			}

			.status6 {
				background: #D1D1D6;
			}
		}

	}
</style>